<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
		<title>Flatter a Personal Portfolio Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic,300,300italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
		<!-- js -->
		<script src="js/jquery.min.js"></script>
		<!-- //js -->
		<!-- for-mobile-apps -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Flatter Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
		Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
				function hideURLbar(){ window.scrollTo(0,1); } </script>
		<!-- //for-mobile-apps -->
		<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
<!-- start-smoth-scrolling -->
</head>
	
<body>
<!-- banner -->
	<div class="banner1">
	<div class="container">
		<div class="navi">
			<div class="head-logo">
				<div class="logo">
					<a href="index.html">LOGO</a>
				</div>
				<div class="head-logo-right-icons">
					<div class="head-logo-right">
							<div class="fig11">
							</div>
							<ul>
								<li><a href="#" class="dot"> </a></li>
								<li><a href="#" class="mes"> </a></li>
								<li><a href="#">HIRE ME</a></li>
								<div class="clearfix"> </div>
							</ul>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="top-nav">
				<span class="menu"><img src="images/menu.png" alt="" /></span>
					<ul class="nav1">
						<li><a href="index.html">HOME</a></li>
						<li><a href="portfolio.html">PORTFOLIO</a></li>
						<li><a href="blog.html">BLOG</a></li>
					</ul>
					<script> 
							   $( "span.menu" ).click(function() {
								 $( "ul.nav1" ).slideToggle( 300, function() {
								 // Animation complete.
								  });
								 });
							
					</script>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
<!-- //banner -->
<!-- blog -->
	<div class="blog">
	<div class="container">
		<div class="blog-left">
			<div class="blog-left-text1">
				<h3> Aenean eu odio nec dui tincidunt</h3>
				<img src="images/h.jpg" alt=" " />
				<p>Molestie sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere dit. 
					Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consecteturs.
					Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis,
					lobortis dignissim, pulvinar ac, lorem. Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
					Aenean nonummy hendrerit mauris. Phasellus porta.Lorem ipsum dolor sit amet, 
					consectetuer adipiscing elit. Praesent vestibulum molestie lacus. 
					Aenean non ummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. 
					Cum sociis sere natoque penati bus et magnis dis. Lorem ipsum dolor.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem.
					Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.
					Fusce suscipit varius mi.
					Cum sociis natoque penatibus et magnis dis parturient montes, 
					nascetur ridiculus mus.
					Aenean non ummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. 
					Cum sociis sere natoque penati bus et magnis dis. Lorem ipsum dolor.
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem.
					Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.
					Fusce suscipit varius mi.Nulla dui. Fusce feugiat malesuada odio. Morbi…</p>
			</div>
		</div>
		<div class="blog-right1">
			<div class="search">
				<h3>Search Here</h3>
				<form>
					<input type="text" placeholder="Search..." required=" ">
					<input type="submit" value="Submit">
				</form>
			</div>
			<div class="categories">
				<h3>Categories</h3>
				<ul>
					<li><a href="#">Aliquam dapibus tincidunt</a></li>
					<li><a href="#">Donec sollicitudin molestie</a></li>
					<li><a href="#">Fusce feugiat malesuada odio</a></li>
					<li><a href="#">Cum sociis natoque penatibus</a></li>
					<li><a href="#">Magnis dis parturient montes</a></li>
					<li><a href="#">Donec sollicitudin molestie</a></li>
				</ul>
			</div>
			<div class="categories categories-mid">
				<h3>Archieves</h3>
				<ul>
					<li><a href="#">May 20,2009</a></li>
					<li><a href="#">July 31,2010</a></li>
					<li><a href="#">January 20,2012</a></li>
					<li><a href="#">November 2,2012</a></li>
					<li><a href="#">December 25,2014</a></li>
					<li><a href="#">January 14,2015</a></li>
				</ul>
			</div>
		</div>
		<div class="clearfix"> </div>
		<div class="tags">
				<div class="tags-left">
					<ul>
						<li><small class="para"> </small><span>January 3,2015</span></li>
						<li><a href="#"><small class="para1"> </small><span>admin</span></a></li>
						<li><a href="#"><small class="para2"> </small><span>No Comments</span></a></li>
						<li><a href="#"><small class="para3"> </small><span>View posts</span></a></li>
					</ul>
				</div>
				<div class="tags-right">
					<ul>
						<li><a href="#"><small class="para4"> </small><span>Permalink</span></a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
		</div>
		<div class="related-posts">
			<h3>Related Posts</h3>
			<div class="related-post">
				<img src="images/d.png" alt=" " />
				<h4>Donec sollicitudin molestie</h4>
				<p>Aliquam dapibus tincidunt metus. 
					<span>Praesent justo dolor, lobortis.</span>
				</p>
			</div>
			<div class="related-post related-post-mid">
				<img src="images/c.jpg" alt=" " />
				<h4>Donec sollicitudin molestie</h4>
				<p>Aliquam dapibus tincidunt metus. 
					<span>Praesent justo dolor, lobortis.</span>
				</p>
			</div>
			<div class="related-post">
				<img src="images/f.jpg" alt=" " />
				<h4>Donec sollicitudin molestie</h4>
				<p>Aliquam dapibus tincidunt metus. 
					<span>Praesent justo dolor, lobortis.</span>
				</p>
			</div>
			<div class="related-post">
				<img src="images/g.jpg" alt=" " />
				<h4>Donec sollicitudin molestie</h4>
				<p>Aliquam dapibus tincidunt metus. 
					<span>Praesent justo dolor, lobortis.</span>
				</p>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="responses">
			<h3>3 Responses</h3>
			<div class="responses-response-fig">
				<div class="response-fig">
					<span> </span>
				</div>
				<div class="response-fig-text">
					<p><label>12 July 2015 at 10:30am</label></p>
					<p class="paragh">Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem.
						Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.
						Fusce suscipit varius mi.</p>
					<a href="#">Reply</a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="responses-response-fig responses-mid">
				<div class="response-fig">
					<span> </span>
				</div>
				<div class="response-fig-text">
					<p><label>12 July 2015 at 10:30am</label></p>
					<p class="paragh">Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem.
						Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.
						Fusce suscipit varius mi.</p>
					<a href="#">Reply</a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="responses-response-fig responses-mid">
				<div class="response-fig">
					<span> </span>
				</div>
				<div class="response-fig-text">
					<p><label>12 July 2015 at 10:30am</label></p>
					<p class="paragh">Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem.
						Fusce suscipit varius mi.</p>
					<a href="#">Reply</a>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="comments">
			<h3>leave a comment</h3> 
			<form>
				<input type="text" placeholder="Name" required=" ">
				<input type="text" placeholder="Email" required=" ">
				<input type="text" placeholder="Phone Number" required=" ">
				<textarea placeholder="Message" required=" "></textarea>
				<input type="submit" value="send">
			</form>
		</div>
	</div>
	</div>
<!-- //blog -->
<!-- footer -->
	<div class="footer">
	<div class="container">
		<div class="footer-left">
			<div class="msg">
				<span></span>
			</div>
			<div class="msg-right">
				<a href="#">CONTACT US</a>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="footer-middle">
			<ul>
				<li><a href="#" class="dri"> </a></li>  
				<li><a href="#" class="v1"> </a></li>  
				<li><a href="#" class="twit"> </a></li> 
			</ul>
		</div>
		<div class="footer-right">
			<p>Template by<a href="http://w3layouts.com/"> w3layouts</a></p>
		</div>
		<div class="clearfix"> </div>
	</div>
	</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
	</script>
<!-- //here ends scrolling icon -->